<template>
  <el-container class="main_con proAdd">
    <div class="list_con nomt nopt" style="padding-bottom:0;">
      <div class="lcc">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本" name="p1">
            <div class="edit_con">
              <div class="edit_content nomt" style="border-bottom:0">
                <el-form size="medium" label-width="100px" ref="shForm" :model="obj" :rules="itemRules" class="edit_form" style="width:100%">
                  <el-form-item label="商品类型">
                    <el-radio-group :disabled="isEdit" v-model="obj.type">
                      <el-radio class="square" :label="0">实体商品</el-radio>
                      <!-- <el-radio disabled class="square" :label="1">虚拟商品</el-radio> -->
                    </el-radio-group>
                  </el-form-item>
                  <el-divider></el-divider>
                  <el-form-item label="商品名称" prop="name">
                    <el-input placeholder="请输入商品名称" maxlength="32" show-word-limit v-model="obj.name" style="width:300px;"></el-input>
                  </el-form-item>

                  <el-form-item label="商品副标题" prop="subtitle">
                    <el-input placeholder="请输入商品副标题" maxlength="32" show-word-limit v-model="obj.subtitle" style="width:300px"></el-input>
                  </el-form-item>

                  <el-form-item label="商品主图" prop="master">
                    <div style="width:100px;height:100px;"><Upload :tempUrl="obj.master" @input="getImage"></Upload></div>
                    <el-checkbox :disabled="obj.master == ''" v-model="obj.cover">添加到商品轮播图</el-checkbox>
                  </el-form-item>

                  <el-form-item label="商品轮播图" prop="slideshow"><UploadMulti :obj="obj"></UploadMulti></el-form-item>

                  <el-form-item label="所属分类" prop="classify_id">
                    <el-select v-model="obj.classify_id"><el-option v-for="(item, i) in cateList" :key="item.id" :label="item.name" :value="item.id+''"></el-option></el-select>
                  </el-form-item>
                  <el-form-item label="商品排序"><el-input v-model="obj.sort" style="width:80px"></el-input></el-form-item>
                  <el-divider></el-divider>

                  <el-form-item label="商品分享图">
                    <div style="width:100px;height:100px;"><Upload :tempUrl="obj.share" @input="getImageShare"></Upload></div>
                  </el-form-item>
                  <el-divider></el-divider>

                  <span v-if="obj.has_sku == 0">
                    <el-form-item label="积分价"><el-input v-model="obj.sell_price" style="width:80px"></el-input></el-form-item>
                    <!-- <el-form-item label="默认划线价"><el-input v-model="obj.original_price" style="width:80px"></el-input></el-form-item> -->
                    <el-form-item v-if="isEdit" label="剩余库存"><el-input v-model="obj.total" style="width:80px"></el-input></el-form-item>
                    <el-form-item v-else label="默认库存"><el-input v-model="obj.total" style="width:80px"></el-input></el-form-item>
                  </span>
                  <el-form-item label="提取方式">
                    <el-radio-group v-model="obj.deliver">
                      <el-radio :label="1">快递</el-radio>
                      <el-radio v-has="11" :label="2">自提</el-radio>
                      <el-radio v-has="11" :label="3">两者都支持</el-radio>
                    </el-radio-group>
                    <div v-if="storeList != 0" style="color:#909399;font-size:12px;">默认两种类型都支持</div>
                  </el-form-item>

                  <el-form-item label="多规格">
                    <el-radio-group v-model="obj.has_sku">
                      <el-radio :label="0">关闭</el-radio>
                      <el-radio :label="1">开启</el-radio>
                    </el-radio-group>
                    <div class="gray_area sku_setting" v-if="obj.has_sku == 1">
                      <div class="sku_attr">
                        <div class="attr_bk" v-for="(item, i) in obj.sku_value" :key="i">
                          <i class="icon-abl-close-bk el-icon-error" @click="removeSkuItem(i)"></i>
                          <div class="attr_name">
                            <el-input v-model="item.name" placeholder="如颜色、尺码、大小" style="width:180px" @keyup.enter.native="formatSkuData" @blur="formatSkuData"></el-input>
                            <el-checkbox v-model="item.has_pic" @change="usePic(i)" :true-label="1" :false-label="0" style="margin-left:20px;line-height:0">添加图片</el-checkbox>
                          </div>
                          <div class="attr_list">
                            <div class="line"><span class="line_bk"></span></div>
                            <ul>
                              <li v-for="(sitem, l) in item.attrValue" :key="l">
                                <i class="icon-abl-close el-icon-error" @click="removeSkuValue(i, l)"></i>
                                <el-input
                                  v-model="sitem.value"
                                  placeholder="子规格,如L、M"
                                  style="width:180px"
                                  @keyup.enter.native="formatSkuData"
                                  @blur="formatSkuData"
                                ></el-input>
                              </li>
                              <li class="addItem" @click="addSkuValue(i)">+添加规格值</li>
                            </ul>
                          </div>
                        </div>

                        <div v-if="obj.sku_value.length < 3" class="attr_bk addBk" @click="addSkuItem">+添加规格项</div>
                      </div>
                      <div class="sku_num_all">
                        <div class="l_title">批量设置：</div>
                        <el-input placeholder="积分价" v-model="set_all.sell_price" style="width:180px;margin-right:20px;"></el-input>
                        <!-- <el-input placeholder="划线价" v-model="set_all.original_price" style="width:180px;margin-right:20px;"></el-input> -->
                        <el-input placeholder="重量" v-model="set_all.weight" style="width:180px;margin-right:20px;"></el-input>
                        <el-input v-if="!obj.is_store_inventory" placeholder="库存" v-model="set_all.total" style="width:180px;margin-right:20px;"></el-input>
                        <el-button style="margin-right:10px;" @click="setAll">应用</el-button>
                      </div>
                      <div class="sku_set">
                        <el-table :data="tabledata" :span-method="arraySpanMethod" :key="rk">
                          <template v-for="(item, i) in keylist">
                            <el-table-column v-if="item == '图片'" :prop="'k' + i" :key="i" :label="item">
                              <template slot-scope="scope">
                                <div style="width:40px;height:40px;"><Upload :tempUrl="scope.row.pic" @input="getSkuImage($event, i, scope.$index)"></Upload></div>
                              </template>
                            </el-table-column>
                            <el-table-column v-if="item != '图片'" :prop="'k' + i" :key="i" :label="item"></el-table-column>
                          </template>
                          <el-table-column label="积分价">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.sell_price"></el-input>
                            </template>
                          </el-table-column>
                          <!--  <el-table-column label="划线价">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.original_price"></el-input>
                            </template>
                          </el-table-column> -->
                          <el-table-column label="重量(g)">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.weight"></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column label="库存(件)" v-if="!obj.is_store_inventory">
                            <template slot-scope="scope">
                              <div style="display:flex;align-items: center;"><el-input v-model="scope.row.total"></el-input></div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </el-form-item>
                  <!--     <el-form-item label="附加属性">
                    <el-button type="text" @click="addattach">添加属性</el-button>
                    <div style="color:#909399;font-size:12px;">商品应付价格=商品基本价格+附加规格价格,附加规格库存只代表该附加规格</div>
                    <div class="attach" v-for="(item, i) in attachlist" :key="i">
                      <i class="icon-abl-close el-icon-error" @click="removeattach(i)"></i>
                      <div class="u-flex attachtitle">
                        <div class="u-label"><span>属性名</span></div>
                        <el-input v-model="item.name"></el-input>
                        <el-checkbox v-model="item.isroot" :true-label="1" :false-label="0" style="margin-right:20px;line-height:0">必选</el-checkbox>
                        <el-button type="text" @click="addattachitem(i)">添加规格</el-button>
                      </div>
                      <div class="u-flex " v-for="(data, index) in item.list" :key="index">
                        <div class="u-flex">
                          <div class="u-label"><span>规格名</span></div>
                          <el-input v-model="data.name"></el-input>
                        </div>
                        <div class="u-flex">
                          <div class="u-label"><span>附加价格</span></div>
                          <el-input v-model="data.price"></el-input>
                        </div>
                        <div class="u-flex">
                          <div class="u-label"><span>库存</span></div>
                          <el-input v-model="data.total"></el-input>
                        </div>
                        <el-button @click='removeattachitem(i,index)' type="text">删除</el-button>
                      </div>
                    </div>
                  </el-form-item> -->
                  <el-divider></el-divider>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="详情" name="p2" style="padding:10px 2px 0 0;">
            <div class="detial_div">
              <div>
                <span class="title">商品详情预览</span>
                <div v-html="obj.content" class="content_div"></div>
              </div>

              <tinymce v-model="obj.content" :height="600" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="参数" name="p3">
            <div class="edit_con">
              <div class="edit_content nomt" style="border-bottom:0">
                <el-form size="medium" label-width="100px" class="edit_form" style="width:100%">
                  <el-form-item label="商品参数">
                    <el-switch :active-value="1" :inactive-value="0" v-model="obj.has_parameter"></el-switch>
                    <div class="proPrams" v-if="obj.has_parameter == 1">
                      <dl>
                        <dt>
                          <div class="dks drag"></div>
                          <div class="dks ins">参数名称</div>
                          <div class="dks ins">参数值</div>
                          <div class="dks cbs">操作</div>
                        </dt>
                        <draggable element="ul" v-model="obj.parameter">
                          <dd v-for="(item, i) in obj.parameter" :key="i">
                            <div class="dks drag"><i class="el-icon-d-caret"></i></div>
                            <div class="dks ins"><el-input size="small" v-model="item.key"></el-input></div>
                            <div class="dks ins"><el-input size="small" v-model="item.value"></el-input></div>
                            <div class="dks cbs"><el-button type="text" @click="removeParameter(i)">删除</el-button></div>
                          </dd>
                        </draggable>
                        <dd class="ap">
                          <div class="dks ins"><el-button type="text" @click="addParameter">添加商品参数</el-button></div>
                        </dd>
                      </dl>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="edit_footer" v-if="!onlyShow">
        <el-button v-if="isCopy" size="medium" type="primary" @click="saveData">提交数据</el-button>
        <el-button v-else size="medium" type="primary" @click="saveData">保存数据</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
import draggable from 'vuedraggable';
import Upload from '@/components/Upload/SingleImage2';
import UploadMulti from '@/components/Upload/uploadMulti';
import Tinymce from '@/components/Tinymce';
import {getgoodsdetail, getclassifylist, addgoods, editgoods} from '@/api/mall/integral';
import {getallStore} from '@/api/shop/store';
import {doCombination} from '@/utils/index';
import {objCopy} from '@/utils/index';
import {logintype_byurl} from '@/utils/auth';
import {jur_addons_item} from '@/utils/jurisdiction';
export default {
  data() {
    return {
      isCopy: false,
      rk: 1,
      onlyShow: false,
      set_all: {
        original_price: '',
        sell_price: '',
        weight: '',
        total: '',
        store_inventory: []
      },
      attachlist: [
        {
          name: '颜色',
          isroot: false,
          list: [
            {
              name: '红色',
              price: 10,
              total: 10
            },
            {
              name: '黑色',
              price: 10,
              total: 10
            }
          ]
        }
      ],
      tabledata: [],
      keylist: [],
      activeName: 'p1',
      isEdit: false,
      showStoreInventory: false,
      showStoreInventoryAll: false,
      classify_id: [],
      currentSku: 0,
      is_base_integral: 0,
      obj: {
        retreat: ['1', '2', '3'],
        name: '', //商品名
        type: 0, //商品类型:0:实体商品,1:虚拟商品
        subtitle: '', //副标题
        master: '', //主图
        cover: false, //是否讲主图添加进轮播图
        slideshow: [], //轮播图
        // share: '', //分享图
        classify_id: '', //分类id:1->2->3,1->4,string
        // classify_value: '', //分类值:1级->2级->3级,1级->2级1,string
        // weight: 0, //重量
        deliver: 3, //提取方式:1:快递,2:自提,3:两者都支持(默认)
        // ft_type: 0, //运费:0:包邮,1:模板,2:统一价格
        // ft_id: '', //配送模板id,ft_type=1的时候需要填写
        // ft_price: 0, //统一配送价格,ft_type=2的时候需要填写
        total: 0, //总量，库存?
        original_price: 0, //原价
        sell_price: 0, //售价

        content: '', //商品详情
        sort: 0, //排序
        has_parameter: 0, //是否拥有参数,0:不拥有,1:拥有
        parameter: [], //参数对象

        has_sku: 0, //是否有sku:0:没有,1:有
        sku_value: [
          {
            name: '颜色',
            attrValue: [
              {
                value: '红色'
              },
              {
                value: '黄色'
              },
              {
                value: '蓝色'
              }
            ],
            has_pic: 0
          },
          {
            name: '尺码',
            attrValue: [
              {
                value: 'L'
              },
              {
                value: 'M'
              },
              {
                value: 'S'
              }
            ],
            has_pic: 0
          }
        ], //sku对象{“1&颜色”:[“1&红色”,”2&白色”],”2&尺码”:[“3&L”,”4&M”]},当has_sku为1时必选
        sku: [
          {
            pvs: '颜色:白色,尺码:L',
            weight: 0,
            inventory: {
              original_price: 0,
              sell_price: 0,
              total: 0
            }, //有sku不开启门店库存下的库存对象(is_store_inventory为0时必选)
            store_sku_inventory: [
              {
                store_id: '',
                original_price: 0,
                sell_price: 0,
                total: 0
              }
            ] //有sku的门店库存对象数组(is_store_inventory为1时必选)
          }
        ] //sku对象数组(当has_sku为1时必选)
      },
      _obj: {},
      inputVisible: false,
      inputValue: '',
      // pageIsEdit:0,//0->新增,1->编辑
      // pageName:'新增商品',
      cateList: [], //分类列表
      freightList: [], //配送模板列表
      storeList: [], //门店列表
      isLoading: false,
      ismall: false,
      isintegralopen: 0,
      itemRules: {
        name: [
          {
            required: true,
            message: '商品名称必须填写'
          }
        ],
        subtitle: [
          {
            required: true,
            message: '商品副标题必须填写'
          }
        ],
        master: [
          {
            required: true,
            message: '主图不能为空'
          }
        ],
        slideshow: [
          {
            required: true,
            message: '轮播图不能为空'
          }
        ],
        classify_id: [
          {
            required: true,
            message: '分类不能为空'
          }
        ]
      }
    };
  },
  components: {
    draggable,
    Upload,
    UploadMulti,
    Tinymce
  },
  created() {
    this.isCopy = this.$route.query.isCopy;
    this.ismall = logintype_byurl() == 'mall';
    var _this = this;
    jur_addons_item(11).then(res => {
      if (!res) {
        _this.obj.deliver = 1;
      }
    });
    //获取基础数据
    this.getAllProCate();
    if (this.$route.params.onlyShow) {
      //只查看
      this.onlyShow = true;
      this.getPro(this.$route.params.id);
    } else {
      if (this.$route.query.id) {
        //编辑状态
        this.isEdit = true;
        this.getPro(this.$route.query.id);
      } else {
        this._obj = Object.assign({}, this.obj);
      }
    }
  },
  watch: {
    'obj.cover': function() {
      if (this.obj.cover) {
        this.obj.slideshow.unshift({
          url: this.obj.master,
          name: 'master'
        });
      } else {
        this.obj.slideshow.splice(this.obj.slideshow.findIndex(_ => _.name == 'master'), 1);
      }
    },
    'obj.has_sku': function() {
      if (Boolean(this.obj.has_sku)) {
        this.formatSkuData();
      }
    }
  },
  methods: {
    removeattach(i) {
      this.attachlist.splice(i, 1);
    },
    removeattachitem(i, l) {
      this.attachlist[i].list.splice(l, 1);
    },
    addattach() {
      this.attachlist.push({
        name: '',
        isroot: false,
        list: [
          {
            name: '',
            price: 0,
            total: 0
          }
        ]
      });
    },
    addattachitem(i) {
      this.attachlist[i].list.push({
        name: '',
        price: 0,
        total: 0
      });
    },

    //获取所有商品分类
    getAllProCate() {
      getclassifylist().then(res => {
        this.cateList = res.msg;
      });
    },
    //获取商品原始数据
    getPro(id) {
      this.isLoading = true;
      getgoodsdetail(id)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          let max = Number(o.integral_maximum);
          if (o.integral_deduction == 1) {
            if (max == 0) {
              o.my_integral_deduction = 1;
            } else {
              o.my_integral_deduction = 2;
            }
          }
          if (o.integral > 0 && o.is_integral) {
            this.is_base_integral = 1;
          } else {
            this.is_base_integral = 0;
          }
          o.total = o.total - o.sell;
          if (o.retreat) {
            o.retreat = o.retreat.split(',');
          } else {
            o.retreat = [];
          }

          objCopy(this.obj, o);

          //转换类别数据
          let c = [];
          c = o.classify_id.split(',');
          c.forEach((e, i) => {
            c[i] = c[i].split('->');
          });
          this.classify_id = c;
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    async Validate() {
      var str = false;
      // let i=this.obj.sku_value.findIndex(_=>{
      //     return _.attrValue.findIndex(b=>b.name=='')>-1
      // })
      // console.log(i)
      // return false
      this.obj.sku_value.forEach(a => {
        a.attrValue.forEach(b => {
          if (!b.value) {
            str = '规格"' + b.name + '"有子规格项未填写';
          }
        });
      });
      this.obj.sku.forEach(a => {
        if (!a.inventory.sell_price) {
          str = '规格"' + a.pvs + '"售价不能为空';
          return;
        }
        if (!a.inventory.original_price) {
          a.inventory.original_price = 0;
          // str = '规格"' + a.pvs + '"原价不能为空';
          // return;
        }
        if (!a.inventory.total&&a.inventory.total!=0) {
          console.log(a.inventory)
          str = '规格"' + a.pvs + '"库存不能为空';
          return;
        }
      });

      return str;
    },
    //保存数据
    async saveData() {
      //封装SKU数据
      let li = [];
      this.tabledata.forEach(e => {
        let o = {};
        o.pvs = '';
        for (let i = 0, l = this.keylist.length; i < l; i++) {
          if (this.keylist[i] != '图片') {
            o.pvs += this.keylist[i] + ':' + e['k' + i] + ',';
          }
        }
        //生成pvs参数
        o.pvs = o.pvs.substring(0, o.pvs.length - 1);
        o.weight = e.weight;
        o.pic = e.pic;
        o.id = e.pid;

        //生成具体价格参数
        if (this.obj.is_store_inventory) {
          //开启门店库存功能(功能废弃)
          o.store_sku_inventory = [];
          e.store_inventory.forEach(x => {
            o.store_sku_inventory.push({
              store_id: x.store_id,
              original_price: e.original_price,
              sell_price: e.sell_price,
              // total: e.total
              total: this.isEdit ? parseInt(e.total) + parseInt(e.sell) : e.total
            });
          });
        } else {
          o.inventory = {
            original_price: e.original_price,
            sell_price: e.sell_price,
            id: e.id,
            sku_id: e.sku_id,
            // total: e.total
            total: this.isEdit ? parseInt(e.total) + parseInt(e.sell || 0) : e.total
          };
        }
        li.push(o);
      });
      //赋值sku数据
      this.obj.total = this.isEdit ? parseInt(this.obj.total) + parseInt(this.obj.sell || 0) : this.obj.total;
      this.obj.sku = li;
      if (this.obj.has_sku) {
        let str = await this.Validate();
        if (str) {
          this.$alert(str);
          return false;
        }
      }
      this.$refs.shForm.validate(valid => {
        if (valid) {
          if (this.obj.content == '') {
            this.$alert('商品详情不能为空');
            this.activeName = 'p2';
            return false;
          }
          //提交数据
          delete this.obj.cover;
          this.isLoading = true;
          if (this.isEdit) {
            editgoods(this.obj).then(res => {
              this.isLoading = false;
              this.$router.push({path: '/integralgoods/goodslist'});
            });
          } else {
            addgoods(this.obj).then(res => {
              this.isLoading = false;
              this.$router.push({path: '/integralgoods/goodslist'});
            });
          }
        } else {
          //校验没通过
          return false;
        }
      });
    },

    //获取主图
    getImage(val) {
      this.obj.master = val;
    },
    //获取分享图
    getImageShare(val) {
      this.obj.share = val;
    },
    //获取Sku图片
    getSkuImage(val, key, index) {
      // console.log(key)
      // console.log(index)
      // console.log(this.tabledata)
      //this.tabledata[index]['k' + key] = val;
      //处理图片
      let i = this.obj.sku_value.findIndex(_ => _.has_pic == 1);
      //console.log(i)
      //console.log(this.tabledata)
      this.tabledata[index].pic = val;
      let x = this.tabledata[index];
      switch (i) {
        case 0:
          //第一项存在图片
          this.tabledata
            .filter(_ => {
              return _.k0 == x.k0;
            })
            .forEach(e => {
              e.pic = x.pic;
            });
          break;
        case 1:
          //第二项存在图片
          this.tabledata
            .filter(_ => {
              return _.k0 == x.k0 && _.k1 == x.k1;
            })
            .forEach(e => {
              e.pic = x.pic;
            });
          break;
        case 2:
          //第三项存在图片
          this.tabledata
            .filter(_ => {
              return _.k0 == x.k0 && _.k1 == x.k1 && _.k2 == x.k2;
            })
            .forEach(e => {
              e.pic = x.pic;
            });
          break;
        default:
          //empty
          break;
      }
    },
    //启用SKU图片
    usePic(index) {
      this.obj.sku_value.forEach((e, i) => {
        if (i != index) {
          e.has_pic = 0;
        }
      });
      this.formatSkuData();
    },
    //SKU批量设置参数
    setAll() {
      this.tabledata.forEach(e => {
        //批量设置划线价
        if (this.set_all.original_price) {
          e.original_price = this.set_all.original_price;
        }
        //批量设置销售价
        if (this.set_all.sell_price) {
          e.sell_price = this.set_all.sell_price;
        }
        //批量设置重量
        if (this.set_all.weight) {
          e.weight = this.set_all.weight;
        }
        //批量设置库存
        if (this.set_all.total) {
          e.total = this.set_all.total;
        }
      });
    },
    //添加SKU项
    addSkuItem() {
      this.obj.sku_value.push({
        name: '',
        attrValue: [{}],
        has_pic: 0
      });
      this.formatSkuData();
    },
    //删除SKU项
    removeSkuItem(i) {
      this.obj.sku_value.splice(i, 1);
      this.formatSkuData();
    },
    //添加SKU值
    addSkuValue(i) {
      this.obj.sku_value[i].attrValue.push({
        value: ''
      });
      this.formatSkuData();
      console.log(this.tabledata);
    },
    //删除SKU值
    removeSkuValue(i, l) {
      if (this.obj.sku_value[i].attrValue.length > 1) {
        this.obj.sku_value[i].attrValue.splice(l, 1);
        this.formatSkuData();
      }
    },
    //初始化SKU数据
    formatSkuData() {
      this.rk++;
      let sl = this.obj.sku_value,
        list = [],
        keylist = [];
      //查询出启用pic的sku_item下标
      let index = sl.findIndex(e => e.has_pic == true);

      sl.forEach((e, i) => {
        keylist.push(e.name);
        //预处理attrValue数据,添加sku的key值以及父ID
        e.attrValue.forEach(ee => {
          ee.name = e.name;
          ee.pid = e.id;
        });

        list.push(e.attrValue);
        if (i == index) {
          keylist.push('图片');
          list.push([
            {
              value: ''
            }
          ]);
        }
      });

      this.keylist = keylist;

      let alist = doCombination(list);
      //console.log(alist)

      let t = [];
      alist.forEach((e, i) => {
        let o = {};
        // for(let i=0,l=this.obj.sku_value.length;i<l;i++){
        //   let d = 'k' + i;
        //   o[d] = e[i].value ? e[i].value : '#';
        // };
        for (let i = 0, l = this.keylist.length; i < l; i++) {
          let d = 'k' + i;
          if (this.keylist[i] == '图片') {
            o[d] = e[i].value ? e[i].value : '';
          } else {
            o[d] = e[i].value ? e[i].value : '#';
          }
        }

        //添加参数
        if (this.$route.query.id) {
          //编辑状态
          if (this.obj.has_sku) {
            if (this.obj.is_store_inventory) {
              //开启门店库存（循环数据全部取0下表,可能会有错,库存暂时已搁置,此问题先不研究）
              //o.cost_price = this.obj.sku[i] != undefined ? this.obj.sku[i].storeSkuInventory[0].cost_price : 0;
              o.weight = this.obj.sku[i] != undefined ? this.obj.sku[i].weight : 0;
              o.original_price = this.obj.sku[i] != undefined ? this.obj.sku[i].storeSkuInventory[0].original_price : 0;
              o.sell_price = this.obj.sku[i] != undefined ? this.obj.sku[i].storeSkuInventory[0].sell_price : 0;
              o.total = this.obj.sku[i] != undefined ? this.obj.sku[i].storeSkuInventory[0].total : 0;
              o.store_inventory = this.obj.sku[i] != undefined ? this.obj.sku[i].storeSkuInventory : [];
              o.pic = this.obj.sku[i] != undefined ? this.obj.sku[i].pic : '';
              //实时库存
              o.tsum = this.obj.sku[i] != undefined ? this.obj.sku[i].total - this.obj.sku[i].sell : 0;
            } else {
              o.weight = 0;
              o.original_price = 0;
              o.sell_price = 0;
              o.total = 0;
              o.store_inventory = [];
              o.pic = '';
              //o.cost_price = this.obj.sku[i].inventory.sell_price;
              //定位数据
              let tls = [],
                s = '';
              tls = e.filter(_ => {
                return _.value != '';
              });
              //拼装标志
              tls.forEach(e => {
                s += e.pid + ':' + e.id + ',';
              });
              s = s.substring(0, s.length - 1);

              //定位
              let target = this.obj.sku.filter(_ => {
                return _.pvs == s;
              });

              if (target.length > 0) {
                o.weight = target[0].weight;
                o.original_price = target[0].inventory.original_price;
                o.sell_price = target[0].inventory.sell_price;
                o.total = target[0].inventory.total;
                // o.total = target[0].inventory.total - target[0].inventory.sell;
                o.sell = target[0].inventory.sell;
                o.store_inventory = [];
                o.pic = target[0].pic;

                o.pid = target[0].id;
                o.id = target[0].inventory.id;
                o.sku_id = target[0].inventory.sku_id;

                //实时库存
                o.tsum = target[0].inventory.total - target[0].inventory.sell;
              }
            }
          }
        } else {
          //o.cost_price = 0;
          o.weight = 0;
          o.original_price = 0;
          o.sell_price = 0;
          o.total = 0;
          o.store_inventory = [];
          o.pic = '';
        }

        t.push(o);
      });

      //console.log(t)
      this.tabledata = t;
    },
    //表格合并功能计算函数
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      switch (this.obj.sku_value.findIndex(e => e.has_pic == true)) {
        case 0:
          if (columnIndex === 0 || columnIndex === 1) {
            let d = this.obj.sku_value[1] ? this.obj.sku_value[1].attrValue.length : 1;

            if (this.obj.sku_value[2] && this.obj.sku_value[2].attrValue) {
              d = d * this.obj.sku_value[2].attrValue.length;
            }

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          } else if (columnIndex === 2) {
            let d = this.obj.sku_value[2] ? this.obj.sku_value[2].attrValue.length : 1;

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
          break;
        case 1:
          if (columnIndex === 0) {
            let d = this.obj.sku_value[1] ? this.obj.sku_value[1].attrValue.length : 1;

            if (this.obj.sku_value[2] && this.obj.sku_value[2].attrValue) {
              d = d * this.obj.sku_value[2].attrValue.length;
            }

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          } else if (columnIndex === 1 || columnIndex === 2) {
            let d = this.obj.sku_value[2] ? this.obj.sku_value[2].attrValue.length : 1;

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
          break;
        case 2:
        default:
          if (columnIndex === 0) {
            let d = this.obj.sku_value[1] ? this.obj.sku_value[1].attrValue.length : 1;

            if (this.obj.sku_value[2] && this.obj.sku_value[2].attrValue) {
              d = d * this.obj.sku_value[2].attrValue.length;
            }

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          } else if (columnIndex === 1) {
            let d = this.obj.sku_value[2] ? this.obj.sku_value[2].attrValue.length : 1;

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
          break;
      }
    },
    //添加参数条数
    addParameter() {
      this.obj.parameter.push({
        key: '',
        value: ''
      });
    },
    //删除参数条数
    removeParameter(i) {
      this.obj.parameter.splice(i, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
//穿透样式,解决样式无法对齐的bug
::v-deep .el-checkbox .el-checkbox__label {
  vertical-align: middle;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: #fff !important;
  color: #000 !important;
}
.radio_icon {
  font-size: 17px;
  margin-left: 5px;
}
.radio_icon_img {
  width: 40px;
  height: 40px;
  position: absolute;
  top: -11px;
  margin-left: 5px;
  // background: url("@/assets/images/tuijian.png") no-repeat center center;
}
.inventory {
  .el-radio {
    position: relative;
    margin-right: 50px;
  }
}

.proAdd {
  // height:calc(100vh - 36px);
  padding-bottom: 0;

  //主体样式
  .list_con {
    display: flex;
    flex-direction: column;
    // height: 100%;
    padding-bottom: 0;
    height: calc(100vh - 70px);

    .lcc {
      flex: 1;
      overflow-y: auto;
      height: 0;
      position: relative;
    }

    .edit_footer {
      height: 60px;
      line-height: 60px;
      box-sizing: border-box;
      flex: 0;
      bottom: 0;
      z-index: 10;
      border-top: 1px solid #dcdfe6;
      text-align: center;
    }
  }

  //公共灰色区域样式
  .gray_area {
    background: #f4f6f8;
    margin-top: 10px;
    padding: 20px;

    &.store_inventory {
      width: 500px;
    }
  }

  //设置商店库存样式
  .store_inventory {
    width: 600px;

    ul {
      li {
        display: flex;
        border-top: 1px solid #dcdfe6;
        padding: 20px 0;

        &:first-child {
          border-top: 0;
          padding-top: 0;
        }

        &.addMore {
          padding-top: 10px;
          padding-bottom: 0;
          justify-content: center;
          color: #1890ff;
          cursor: pointer;
        }
      }
    }
  }

  //设置SKU样式
  .sku_attr {
    .attr_bk {
      border-bottom: 1px solid #dcdfe6;
      padding-top: 20px;
      position: relative;

      .icon-abl-close-bk {
        position: absolute;
        z-index: 1;
        font-size: 20px;
        right: 0;
        top: 20px;
        cursor: pointer;
        color: #909399;
        display: none;
      }

      &:first-child {
        padding-top: 0;
      }

      &.addBk {
        padding-bottom: 20px;
        color: #2e68ea;
        cursor: pointer;
        text-align: center;
      }

      &:hover {
        .icon-abl-close-bk {
          display: block;
        }
      }

      .attr_name {
        //no css
      }

      .attr_list {
        display: flex;
        padding: 0 0 20px 50px;
        position: relative;

        .line {
          position: absolute;
          top: 18px;
          left: 20px;
          width: 20px;
          height: 20px;
          border: 1px solid #b8b9bd;
          border-top: none;
          border-right: none;
        }

        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            position: relative;
            margin-right: 20px;
            margin-top: 20px;

            .icon-abl-close {
              position: absolute;
              z-index: 1;
              font-size: 20px;
              right: -10px;
              top: -10px;
              cursor: pointer;
              color: #909399;
              display: none;

              &:hover {
                color: #606266;
              }
            }

            &.addItem {
              color: #2e68ea;
              cursor: pointer;
            }

            &:hover {
              .icon-abl-close {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  .sku_num_all {
    background: #fff;
    display: flex;
    margin-top: 20px;
    padding: 20px 0;

    .l_title {
      width: 100px;
      margin-right: 20px;
      text-align: right;
    }
  }

  .sku_set {
    margin-top: 20px;
    background: #fff;

    // .sku_header{
    //   border-bottom: 1px solid #DCDFE6;

    //   th{
    //     padding: 5px 0;
    //   }
    // }

    // .sku_body{
    //   tr{
    //     td{
    //       padding: 10px;
    //       text-align: center;
    //       border-bottom: 1px solid #DCDFE6;
    //     }

    //   }
    // }
  }

  //商品参数样式
  .proPrams {
    width: 800px;
    box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    dl {
      width: 100%;
      border: 1px solid #dcdfe6;

      dt {
        display: flex;
        border-bottom: 1px solid #dcdfe6;
        height: 40px;
        line-height: 40px;
        background: #f4f6f8;
        font-weight: 700;

        .dks {
          &.drag {
            width: 30px;
            text-align: center;
            font-size: 16px;
          }

          &.ins {
            flex: 1;
            padding-right: 15px;
          }

          &.cbs {
            width: 50px;
          }
        }
      }

      dd {
        display: flex;
        padding: 10px 0;
        margin: 0;
        border-bottom: 1px solid #dcdfe6;

        &.ap {
          border-bottom: 0;
          text-align: center;
        }

        // &:last-child{
        //   border-bottom: 0;
        // }

        .dks {
          &.drag {
            cursor: pointer;
            width: 30px;
            text-align: center;
            font-size: 16px;
          }

          &.ins {
            flex: 1;
            padding-right: 15px;
          }

          &.cbs {
            width: 50px;
          }
        }
      }
    }
  }

  //分销样式
  .distribution {
    width: 1000px;
    box-sizing: border-box;
    padding: 0px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
    .el-select .el-input {
      width: 110px;
    }

    .setting_area {
      background: #fff;
      &:first-child {
        background: #edf0f3;
      }
      ::v-deep .el-input-group__append {
        background: #fff !important;
        border-left: none;
      }
      ::v-deep.el-input-group__prepend {
        background: #fff;
      }
      display: flex;
      border-bottom: 1px solid #dcdfe6;

      &:last-child {
        border-bottom: 0;
      }

      .setStyle {
        flex: 1;
        padding: 20px 10px;
        display: flex;
        position: relative;
        &:first-child {
          flex: 0 1 auto;
          width: 100px;
          text-align: center;
        }
        .el-input {
          margin-left: 20px;
          width: 120px;
        }
        > span {
          position: absolute;
          right: 53px;
        }
        &.tc {
          text-align: center;
        }
      }
    }
  }
  //灰色框
  .fks {
    background: #f4f6f8;
    //width: 500px;
    padding: 20px;
    color: #606266;
  }
}
</style>
<style lang="scss">
.detial_div {
  display: flex;
  .title {
    text-align: center;
    display: block;
    margin: 10px 0;
  }
  .content_div {
    border: 1px solid #f5f2f0;
    margin-right: 25px;
    width: 375px;
    height: 600px;
    overflow-y: scroll;
    p {
      margin: 0;
    }
    img {
      width: 100%;
	  display:block
    }
  }
  .tinymce-container {
    width: calc(100% - 400px) !important;
  }
}
.attach {
  background: #f4f6f8;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  .icon-abl-close {
    position: absolute;
    z-index: 1;
    font-size: 20px;
    right: -10px;
    top: -10px;
    cursor: pointer;
    color: #909399;
    display: none;

    &:hover {
      color: #606266;
    }
  }

  &:hover {
    .icon-abl-close {
      display: block;
    }
  }
  > .u-flex {
    margin-bottom: 20px;
  }
  .u-label {
    width: 60px;
    text-align: right;
    margin-right: 10px;
  }
  .el-input {
    width: 180px;
    margin-right: 20px;
  }
}
</style>
